
import React, { useEffect, useRef } from 'react';
import axios from 'axios';
import {
    FooterToolbar,
    PageContainer,
   
    ProFormDateRangePicker,
     ProFormSelect,
   
    ProFormTextArea,
    ProFormUploadButton,
} from '@ant-design/pro-components';




import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormDatePicker,
  ProFormDigit,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, message } from 'antd';
import moment from 'dayjs';
// import { useRef } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const formRef = useRef<ProFormInstance>();
 // 请求后端数据并填充表单
 useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/goods/product_status');
        const data = response.data;

        // 将数据填入表单
        formRef.current?.setFieldsValue({
          name: data.name,
          company: data.company,
          date: moment(data.date),
        });
      } catch (error) {
        console.error('获取数据失败:', error);
        message.error('获取数据失败');
      }
    };

    fetchData();
  }, []);




  const onFill = () => {
    formRef?.current?.setFieldsValue({
      name: '张三',
      company: '蚂蚁金服',
    });
  };

  const getCompanyName = () => {
    message.info(`公司名称为 "${formRef?.current?.getFieldValue('company')}"`);
  };

  const getFormatValues = () => {
    console.log(
      '格式化后的所有数据：',
      formRef.current?.getFieldsFormatValue?.(),
    );
  };

  const validateAndGetFormatValue = async () => {
    const values = await formRef.current?.validateFieldsReturnFormatValue?.();
    console.log('校验表单并返回格式化后的所有数据：', values);
  };

  return (
    <ProForm
      title="新建表单"
      formRef={formRef}
      submitter={{
        render: (props, doms) => {
          return [
            ...doms,
            <Button htmlType="button" onClick={onFill} key="edit">
              一键填写
            </Button>,
            <Button htmlType="button" onClick={getCompanyName} key="read">
              读取公司
            </Button>,
            <Button.Group key="refs" style={{ display: 'block' }}>
              <Button htmlType="button" onClick={getFormatValues} key="format">
                获取格式化后的所有数据
              </Button>
              <Button
                htmlType="button"
                onClick={validateAndGetFormatValue}
                key="format2"
              >
                校验表单并返回格式化后的所有数据
              </Button>
            </Button.Group>,
          ];
        },
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        message.success('提交成功');
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="签约客户名称"
        tooltip="最长为 24 位"
        placeholder="请输入名称"
      />

      <ProFormText
        width="md"
        name="company"
        label="我方公司名称"
        placeholder="请输入名称"
      />
      <ProForm.Group>
                        <ProFormText
                            name="product_details_id"
                            label="商品详情id"
                            tooltip="提示"
                            placeholder="请输入id"
                            rules={[{ required: true }]}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormText
                            name="product_name"
                            label="商品名称"
                            tooltip="最长为 20 位"
                            placeholder="请输入名称"
                            rules={[{ required: true }]}
                        />
                        <ProFormText
                            width="md"
                            name="product_picture"
                            label="商品头图"
                            placeholder="图片地址"
                        />
                    </ProForm.Group>

                    <ProForm.Group>
                        <ProFormTextArea
                            width="xl"
                            name={['description']}
                            label="商品文字描述"
                            placeholder="请输入详细文字描述，最大不超过100字"
                            rules={[{ required: true }]}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormSelect
                            options={[{
                                value: 'type1',
                                label: '1类商品',
                            },
                            {
                                value: 'type2',
                                label: '2类商品',
                            },
                            {
                                value: 'type3',
                                label: '3类商品',
                            },

                            ]}
                            width="xs"
                            name="product_type"
                            label="商品类型"
                        />
                    </ProForm.Group>
                    <ProFormUploadButton
                        name="文档"
                        label="商品详情描述文档上传"
                        extra="支持扩展名：.jpg .zip .doc .wps" />
                    <ProForm.Group>
                        <ProFormText
                            name="supplier_name"
                            label="供应商名称"
                            tooltip="最长为 20 位"
                            placeholder="请输入名称"
                            rules={[{ required: true }]}
                        />
                        <ProFormText
                            width="md"
                            name="supplier_phone"
                            label="供应商联系方式"
                            placeholder="请输入供应商联系方式"
                            rules={[{ required: true }]}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormText
                            name={['service_guarantee', 'name']}
                            label="服务保障"
                            placeholder="请输入服务保障"
                            rules={[{ required: true }]}
                        />

                    </ProForm.Group>
                    <ProFormSelect
                        width="xs"
                        name="select"
                        label="黄金会员价格类型"
                        valueEnum={{
                            chunjifen: '纯积分',
                            jifenjiaqian: '积分加钱',
                            xianjingoumai: '现金购买',
                        }}
                        placeholder="购买方式"
                        rules={[{ required: true }]}
                    />
                    <ProForm.Group>
                        <ProFormText
                            name="pptIntegral"
                            label="积分数量"
                            tooltip="最长为 20 位"
                            placeholder="请输入数量"
                        />
                        <ProFormText
                            width="md"
                            name="pptMoney"
                            label="现金价格"
                            placeholder="请输入价格"
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormDateRangePicker
                            name={['contract', 'createTime']}
                            label="商品投放时间"
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormSelect
                            options={[{
                                value: 'zhengzhou',
                                label: '郑州',
                            },
                            {
                                value: 'changsha',
                                label: '长沙',
                            },

                            ]}
                            width="xs"
                            name="productType-a"
                            label="投放城市"
                        />

                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormDigit
                            width="xs"
                            name="stock"
                            label="兑换上限"
                            tooltip="请勿超过库存上限"
                        />
                        <ProFormDigit
                            width="xs"
                            name="stock"
                            label="库存上限"
                        />
                    </ProForm.Group>
      <ProFormDatePicker name="date" initialValue={moment('2021-08-09')} />
    </ProForm>
  );
};
